<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>新闻界面</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>

	<body>

		<div id="app">
			<el-form :inline="true" :model="select" class="user-search">
				<el-form-item label="搜索：">
					<el-input size="small" v-model="select.news_id" placeholder="输入新闻编号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
					<el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="datalist" style="width: 100%">
				<el-table-column fixed prop="news_id" label="新闻编号" width="150">
				</el-table-column>
				<el-table-column prop="news_title" label="新闻标题" width="120">
				</el-table-column>
				<el-table-column prop="news_author" label="新闻作者" width="120">
				</el-table-column>
				<el-table-column prop="news_date" label="发布日期" width="120">
				</el-table-column>
				<el-table-column prop="news_content" label="发布内容" width="500">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="300">

					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>

			</el-table>


			<el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
				<el-form label-width="120px" :model="editForm" ref="editForm">
					<el-form-item label="新闻编号" prop="news_id">
						<el-input size="small" v-model="editForm.news_id" auto-complete="off" placeholder="请输入新闻编号">
						</el-input>
					</el-form-item>
					<el-form-item label="新闻标题" prop="news_title">
						<el-input size="small" v-model="editForm.news_title" auto-complete="off" placeholder="请输入新闻标题">
						</el-input>
					</el-form-item>
					<el-form-item label="新闻作者" prop="news_author">
						<el-input size="small" v-model="editForm.news_author" auto-complete="off" placeholder="请输入新闻作者">
						</el-input>
					</el-form-item>
					<el-form-item label="发布日期" prop="news_date">
						<el-input size="small" v-model="editForm.news_date" auto-complete="off" placeholder="请输入发布日期">
						</el-input>
					</el-form-item>
					<el-form-item label="发布内容" prop="news_content">
						<el-input size="small" v-model="editForm.news_content" auto-complete="off" placeholder="请输入发布内容">
						</el-input>
					</el-form-item>

				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button size="small" @click="closeDialog">取消</el-button>
					<el-button size="small" type="primary" :loading="loading" class="title" @click="update()">
						更新</el-button>
					<el-button size="small" type="primary" :loading="loading" class="title" @click="addForm('editForm')">添加
					</el-button>
				</div>
			</el-dialog>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					datalist: [],
					selectid: [],
					loading: false, //是显示加载
					title: "添加",
					editFormVisible: false, //控制编辑页面显示与隐藏
					editForm: {
						news_id: '',
						news_title: "",
						news_author: "",
						news_date: "",
						news_content: "",
					},
					select: {
						news_id: "",
					},
					delet: ""
				},
				created() {
					this.all()

				},
				methods: {
					all() {
						axios.get('http://localhost:60081/news/selectall').then(res => {
							console.log(res)
							this.datalist = res.data
							for(i in this.datalist){
								this.datalist[i].news_date=this.GetDateFormat(this.datalist[i].news_date)
							}

						})
					},
				GetDateFormat(str) {
				return new Date(parseInt(str.substr(6, 13))).toLocaleDateString()
				},
					search() {
						let param = new URLSearchParams()
						param.append('id', this.select.news_id)
						axios.post('http://localhost:60081/news/selectid', param

						).then(res => {
							this.datalist = []
							let arr = []
							arr.splice(0, 1, res.data)
							this.datalist = arr
							console.log(this.datalist)
							console.log(res)
						})
					},
					handleEdit: function(index, row) {
						this.editFormVisible = true;
						if (row != undefined && row != "undefined") {
							this.title = "编辑信息"
							this.editForm.news_id = row.news_id
							this.editForm.news_title = row.news_title
							this.editForm.news_author = row.news_author
							this.editForm.news_date = row.news_date
							this.editForm.news_content = row.news_content
						} else {
							this.title = "添加信息"
							this.editForm.news_id = ""
							this.editForm.news_title = ""
							this.editForm.news_author = ""
							this.editForm.news_date = ""
							this.editForm.news_content = ""
						}
					},
					closeDialog() {
						this.editFormVisible = false;
					},
					addForm(editData) {
						this.$refs[editData].validate((valid) => {
							if (valid) {
								console.log(this.editForm)
								axios.post('http://localhost:60081/news/Create', this.editForm).then(res => {
									this.editFormVisible = false;
									this.$message({
										type: "success",
										message: "添加成功！",
									});
									this.all()
								})
							}
						});
					},
					del(index, row) {
						console.log(row.news_id)
						let params = new URLSearchParams()
						params.append('id', row.news_id)
						axios.post('http://localhost:60081/news/del', params).then(res => {
							this.$message({
								type: "success",
								message: "删除成功！",
							});
							console.log(res)
							this.all()
						})
					},
					update() {
						let ss = new URLSearchParams()
						ss.append('news_id', this.editForm.news_id)
						ss.append('news_title', this.editForm.news_title)
						ss.append('news_content', this.editForm.news_content)
						ss.append('news_date', this.editForm.news_date)
						ss.append('news_author', this.editForm.news_author)
						axios.post('http://localhost:60081/news/update', ss).then(res => {
							this.editFormVisible = false;
							this.$message({
								type: "success",
								message: "更改成功！",
							});
							this.all()
							console.log(res)
						})
					}
				}
			});
		</script>
	</body>

</html>
